<!-- 快速组卷 -->
<template>
  <div class="app-container">
    <el-row>
      <p>组卷信息</p>
      <el-card>
        <el-row>
          <el-col :span="2">
            <el-button type="primary" @click="addQuBank">添加题库</el-button>
          </el-col>
          <el-form ref="form" :model="form" label-width="90px">
            <el-col :span="5">
              <el-form-item label="单选题分数">
                <el-input-number
                  v-model="form.singleQuScore"
                  :min="1"
                  :max="100"
                  label="描述文字"
                  @change="countForm(1, form.multipleQuScore)"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="多选题分数">
                <el-input-number
                  v-model="form.multipleQuScore"
                  :min="1"
                  :max="100"
                  label="描述文字"
                  @blur="countForm(2, form.multipleQuScore)"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="判断题分数">
                <el-input-number
                  v-model="form.judgmentQuScore"
                  :min="1"
                  :max="100"
                  label="描述文字"
                  @blur="countForm(3, form.multipleQuScore)"
                ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="5">
              <el-form-item label="简答题分数">
                <el-input-number
                  v-model="form.shortQuScore"
                  :min="1"
                  :max="100"
                  label="描述文字"
                  @blur="countForm(4, form.multipleQuScore)"
                ></el-input-number>
              </el-form-item>
            </el-col>
          </el-form>
          <el-col :span="2">
            <p style="color: red">试卷总分:{{ form.totalScore }}</p>
          </el-col>
        </el-row>
        <el-col>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column label="题库" align="center" prop="quBankId">
              <template slot-scope="scope">
                <el-select
                  placeholder="请选择题库"
                  v-model="scope.row.quBankId"
                  @change="getQuesitonByid(scope.row.quBankId, scope.$index)"
                >
                  <el-option
                    v-for="item in quBank"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="单选题" align="center" prop="form.singleQu">
              <template slot-scope="scope">
                <el-input
                  style="width: 100px"
                  v-model="scope.row.singleQu"
                  @blur="countTable(1, scope.row.singleQu)"
                >
                </el-input>
                <span style="margin-left: 10px"
                  >/ {{ scope.row.singleQuNum }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="多选题"
              align="center"
              prop="form.multipleQu"
            >
              <template slot-scope="scope">
                <el-input
                  style="width: 100px"
                  v-model="scope.row.multipleQu"
                  @blur="countTable(2, scope.row.multipleQu)"
                >
                </el-input>
                <span style="margin-left: 10px"
                  >/ {{ scope.row.multipleQuNum }}</span
                >
              </template>
            </el-table-column>

            <el-table-column
              label="判断题"
              align="center"
              prop="form.judgmentQu"
            >
              <template slot-scope="scope">
                <el-input
                  style="width: 100px"
                  v-model="scope.row.judgmentQu"
                  @blur="countTable(3, scope.row.judgmentQu)"
                >
                </el-input>
                <span style="margin-left: 10px"
                  >/ {{ scope.row.judgmentQuNum }}</span
                >
              </template>
            </el-table-column>
            <el-table-column label="简答题" align="center" prop="form.shortQu">
              <template slot-scope="scope">
                <el-input
                  style="width: 100px"
                  v-model="scope.row.shortQu"
                  @blur="countTable(4, scope.row.shortQu)"
                >
                </el-input>
                <span style="margin-left: 10px"
                  >/ {{ scope.row.shortQuNum }}</span
                >
              </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small"
                >
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-card>
    </el-row>
    <p>试卷信息</p>
    <el-row>
      <el-card>
        <el-form ref="form" :model="form" label-width="120px">
          <el-form-item label="考试名称">
            <el-input v-model="form.paperName"></el-input>
          </el-form-item>
          <el-form-item label="考试描述">
            <el-input type="textarea" v-model="form.paperMark"></el-input>
          </el-form-item>
          <el-form-item
            label="试卷类型"
            prop="examPaperType"
          >
            <el-select v-model="form.examPaperType" placeholder="请选择">
              <el-option
                v-for="dict in dict.type.paper_type"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="难度"
            prop="examPaperLevel"
          >
            <el-select v-model="form.examPaperLevel" placeholder="请选择">
              <el-option
                v-for="dict in dict.type.paper_level"
                :key="dict.label"
                :label="dict.label"
                :value="dict.label"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="及格分">
            <el-input-number
              v-model="form.passMark"
              @change="passingScoreClick"
              :min="1"
              :max="1000"
              label="描述文字"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="考试时长(分钟)">
            <el-input-number
              v-model="form.examTotalSecond"
              @change="passingScoreClick"
              :min="1"
              :max="200"
              label="考试时长"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="是否限时">
            <el-switch
              v-model="form.isPublic"
              active-color="#13ce66"
              inactive-color="#ff4949"
              active-value="1"
              inactive-value="0"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="考试时间" v-if="form.isPublic == 1">
            <el-date-picker
              v-model="form.examTime"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
      </el-card>
    </el-row>
    <p>权限配置</p>
    <el-row>
      <el-card>
        <template>
          <el-radio v-model="form.radio" label="1">完全公开</el-radio>
          <el-radio v-model="form.radio" label="2">部门开放</el-radio>
        </template>
      </el-card>
    </el-row>
    <el-button type="primary" round @click="savePaper()">保存</el-button>
  </div>
</template>
  
  <script>
import { saveFastGroupPaper } from "@/api/onlineQuestion/index.js";
import { queryBankAll } from "@/api/common/index.js";
export default {
  dicts: ["paper_type", "paper_level"],
  data() {
    return {
      tableData: [],
      quBankId: 0,
      quBank: [],
      value: "",
      form: {
        totalScore: 100,
        value: true,
        radio: "1",
        passMark: 60,
        examTotalSecond: 30,
        isPublic: 0,
        examTime: "",
        singleQu: 0,
        multipleQu: 0,
        judgmentQu: 0,
        shortQu: 0,
        singleQuScore: 5,
        multipleQuScore: 5,
        judgmentQuScore: 5,
        shortQuScore: 5,
        qus: [],
        examPaperLevel:"",
        examPaperType:""

      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  created() {
    //获取题库数据
    this.queryQuBankSel();
  },
  methods: {
    countForm(type, num) {},
    countTable(type, num, index) {},
    deleteRow(index, rows) {
      rows.splice(index, 1);
    },
    //添加题库
    addQuBank() {
      let table = {};
      (table.quBankId = ""), (table.singleQu = 0);
      table.multipleQu = 0;
      table.judgmentQu = 0;
      table.shortQu = 0;
      //动态添加表格数据
      this.tableData.push(table);
    },
    //获取题库下拉框
    queryQuBankSel() {
      queryBankAll(JSON.stringify({}))
        .then((res) => {
          for (let s of res.data) {
            this.quBank.push({
              value: s.quBankId,
              label: s.quBankName,
              singleQu: s.singleQu,
              multipleQu: s.multipleQu,
              judgmentQu: s.judgmentQu,
              shortQu: s.shortQu,
            });
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    //下拉框选择事件
    getQuesitonByid(quBankId, index) {
      this.quBankId = quBankId;
      //回填数据
      this.quBank.find((item) => {
        if (item.value == quBankId) {
          this.tableData[index].singleQuNum = item.singleQu;
          this.tableData[index].multipleQuNum = item.multipleQu;
          this.tableData[index].judgmentQuNum = item.judgmentQu;
          this.tableData[index].shortQuNum = item.shortQu;
        }
      });
    },
    //合格分数时间
    passingScoreClick(value) {
      this.form.passMark = value;
    },
    //新增试卷
    savePaper() {
      this.getFormParams();
      this.$confirm("是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          saveFastGroupPaper(JSON.stringify(this.form))
            .then((res) => {
              if (res.code == 200) {
                this.$message({
                  type: "success",
                  message: "保存成功!",
                  duration: 5000,
                });
                //关闭表单
                this.handleClose();
              }
            })
            .catch((res) => {
              this.$message({
                type: "info",
                message: "保存失败",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消保存",
          });
        });
    },
    //清空表单
    handleClose() {},
    //封装表单参数
    getFormParams() {
      this.form.qus = this.tableData;
    },
  },
};
</script>
  <style scoped>
.box {
  height: calc(100vh - 120px);
  font-size: 14px;
  line-height: 28px;
}

.title {
  font-size: 18px;
  font-weight: 700;
  padding-bottom: 10px;
  padding-top: 20px;
  margin-bottom: 10px;
  border-bottom: #eee 1px dotted;
}

.tags span {
  margin-right: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: hwb(210 95% 5%);
}

.bg-purple {
  border: 0px solid cornflowerblue;
  height: 200px;
}

.app-container {
  height: 100%;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 60px;
}
</style>